<template>
    <!--begin::Header-->
    <div style="" class="header align-items-stretch">
        <!--begin::Container-->
        <div :class="{'container-fluid': headerWidthFluid, 'container-xxl': !headerWidthFluid}"
             class="d-flex align-items-stretch justify-content-between">

            <!--begin::Wrapper-->
            <div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1">

                <!--begin::Navbar-->
                <div class="d-flex align-items-stretch">

                    <div class="align-items-stretch">
                        <h1 class="d-flex align-items-stretch text-dark fw-bolder mt-4 mt-lg-4 mb-1 mb-lg-1 fs-4">
                            Debug Laboratory
                        </h1>
                    </div>

                    <!--begin::Breadcrumb-->
                    <ul v-if="breadcrumbs" class="breadcrumb breadcrumb-separatorless fw-bold fs-7 ms-3 mt-3">
                        <li class="breadcrumb-item pe-3">
                            <router-link to="/lab" class="text-muted text-hover-primary">
                                Home
                            </router-link>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-200 w-5px h-2px"></span>
                        </li>
                        <template v-for="(item, index) in breadcrumbs" :key="index">
                            <li class="breadcrumb-item text-muted">
                                {{ item }}
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                        </template>
                        <li class="breadcrumb-item pe-3 text-dark">
                            {{ title }}
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Navbar-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Header-->
</template>

<script>
    export default {
        name: "Header",
        props: {
            pageTitle: String
        },
        computed: {
            breadcrumbs() {
                return this.$store.getters["lab/pageBreadcrumbPath"]
            },
            title() {
                return this.$store.getters["lab/pageTitle"]
            },
            headerWidthFluid() {
                return this.$store.getters["lab/config"]("header.width") === "fluid"
            }
        }
    }
</script>

<style scoped>

</style>